<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>清算</title>
    <style>
        *{margin: 0; padding:0; list-style: none;}
        ul{ width: 1024px; margin: 0 auto; text-align: center;}
        li h2 { background-color: #F2CC2C; color: #FFF;}
        [v-cloak]{ display: none;}
        button{width: 100px; height: 25px; margin: 5px 0; border: 0; background-color:#00b4e0; color: #FFF;}
        .changci{ padding: 25px 0; border-bottom: 1px solid #dedede; border-top: 1px solid #dedede; background-color: #102E5B; color: #FFF;}
        img{ vertical-align: middle;}
        .changci div  { margin-bottom: 10px;}
        h3{margin-bottom: 20px;}
    </style>
</head>
<body>
    <div id="app" v-cloak>
        <ul>
            <li v-for="(item, index) in countries.common" :key="index">
                <h2>{{item.title.time}}</h2>
                <div class="changci" v-for="(list, index) in item.list" :key="index">
                    <h3>第 {{ index+1 }} 场</h3>
                    <div><span>{{ list.home }}<img :src="list.homeImg" alt=""></span> VS <span><img :src="list.fromHomeImg" alt="">{{ list.fromHome }}</span></div>
                    <div :style=" {'color': list.status == 0 ? 'red': (list.status == 1 ? 'greenyellow' : 'white') } ">{{ list.status == 0 ? "已结束" : (list.status == 1 ? "进行中" : "未开始") }}</div>
                    <div><span>{{list.homeScore}}</span> : <span>{{list.fromHomeScore}}</span></div>
                    <div v-if="list.status==0"><input  v-model="list.homeScore" type="text"> : <input type="text" v-model="list.fromHomeScore"></div>
                    <button v-if="list.status==0" @click = "xiugai(item.id,list)">修改比分</button>
                    <button v-if="0">清算</button>
                </div>
            </li>
        </ul>
    </div>
    <script src="../js/jquery-3.2.1.min.js"></script>
    <script src="../js/underscore.js"></script>
    <script src="../js/vue.js"></script>
    <script>
        var app = new Vue({
            el: "#app",
            data: {
                countries: [],
            },
            mounted() {
                this.getCom();
            },
            methods: {
                //单场竞猜数据
                getCom:function(){
                    $.ajax({
                        url:'http://localhost:4081/worldcup/getCom',
                        dataType:'json',
                        success:function(data){
                            app.countries = data;
                        }
                    })
                },
                xiugai:function(item,list){
                    var id, _list, forces;
                    if (list.homeScore > list.fromHomeScore) {
                        if (confirm(list.home + "胜利?")) {
                            forces = "home"
                        }
                        else{
                            return false;
                        }
                    }
                    else if (list.homeScore < list.fromHomeScore){
                        if (confirm(list.fromHome + "胜利?")) {
                            forces = "fromHome"

                        }
                        else{
                            return false;
                        }
                    }
                    else{
                        if (confirm("平局?")) {
                            forces = "draw";
                        }
                        else{
                            return false;
                        }
                    }
                    id = item
                    _list = list
                    $.ajax({
                        url:'http://localhost:4081/worldcup/invoicing',
                        data:{id:item,list:list,forces:forces},
                        success:function(data){
                            console.log(data)
                        }
                    })
                }
            },
        });
    </script>
</body>
</html>